<template>
  <div class="scrollbar-component" :style="containerStyle">
    <div class="scrollbar-content" :style="contentStyle">
      <slot>{{ 示例内容 }}</slot>
    </div>
    <div class="scrollbar-track vertical" :style="verticalTrackStyle">
      <div class="scrollbar-thumb" :style="verticalThumbStyle"></div>
    </div>
    <div class="scrollbar-track horizontal" :style="horizontalTrackStyle">
      <div class="scrollbar-thumb" :style="horizontalThumbStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollbarComponent',
  componentName: '滚动条',
  icon: 'el-icon-more',
  defaultProps: {
    示例内容: '这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。',
    滚动条宽度: '6',
    滚动条颜色: '#c1c1c1',
    滚动条悬停颜色: '#909399',
    轨道颜色: '#f5f5f5',
    内容背景色: '#ffffff',
    内容内边距: '10px',
    显示水平滚动条: true,
    显示垂直滚动条: true
  },
  props: {
    示例内容: {
      type: String,
      default: '这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。这是一个自定义滚动条组件，可以滚动查看更多内容。'
    },
    滚动条宽度: {
      type: [String, Number],
      default: '6'
    },
    滚动条颜色: {
      type: String,
      default: '#c1c1c1'
    },
    滚动条悬停颜色: {
      type: String,
      default: '#909399'
    },
    轨道颜色: {
      type: String,
      default: '#f5f5f5'
    },
    内容背景色: {
      type: String,
      default: '#ffffff'
    },
    内容内边距: {
      type: String,
      default: '10px'
    },
    显示水平滚动条: {
      type: Boolean,
      default: true
    },
    显示垂直滚动条: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    containerStyle() {
      return {
        width: '100%',
        height: '100%',
        position: 'relative',
        overflow: 'hidden'
      };
    },
    contentStyle() {
      return {
        width: '100%',
        height: '100%',
        overflow: 'auto',
        padding: this.内容内边距,
        backgroundColor: this.内容背景色,
        boxSizing: 'border-box',
        scrollbarWidth: 'none', /* Firefox */
        msOverflowStyle: 'none', /* IE and Edge */
      };
    },
    verticalTrackStyle() {
      return {
        display: this.显示垂直滚动条 ? 'block' : 'none',
        position: 'absolute',
        width: `${this.滚动条宽度}px`,
        backgroundColor: this.轨道颜色,
        borderRadius: `${this.滚动条宽度 / 2}px`,
        top: '2px',
        right: '2px',
        bottom: '2px',
        zIndex: 100
      };
    },
    verticalThumbStyle() {
      return {
        width: '100%',
        height: '30%',
        backgroundColor: this.滚动条颜色,
        borderRadius: `${this.滚动条宽度 / 2}px`,
        position: 'absolute',
        top: '0',
        transition: 'background-color 0.3s'
      };
    },
    horizontalTrackStyle() {
      return {
        display: this.显示水平滚动条 ? 'block' : 'none',
        position: 'absolute',
        height: `${this.滚动条宽度}px`,
        backgroundColor: this.轨道颜色,
        borderRadius: `${this.滚动条宽度 / 2}px`,
        left: '2px',
        right: '2px',
        bottom: '2px',
        zIndex: 100
      };
    },
    horizontalThumbStyle() {
      return {
        height: '100%',
        width: '30%',
        backgroundColor: this.滚动条颜色,
        borderRadius: `${this.滚动条宽度 / 2}px`,
        position: 'absolute',
        left: '0',
        transition: 'background-color 0.3s'
      };
    }
  },
  mounted() {
    this.initScrollbars();
  },
  methods: {
    initScrollbars() {
      const content = this.$el.querySelector('.scrollbar-content');
      const verticalThumb = this.$el.querySelector('.scrollbar-track.vertical .scrollbar-thumb');
      const horizontalThumb = this.$el.querySelector('.scrollbar-track.horizontal .scrollbar-thumb');
      
      // 监听内容滚动事件
      content.addEventListener('scroll', () => {
        this.updateScrollbars(content, verticalThumb, horizontalThumb);
      });
      
      // 初始更新滚动条位置
      this.updateScrollbars(content, verticalThumb, horizontalThumb);
      
      // 监听内容大小变化
      window.addEventListener('resize', () => {
        this.updateScrollbars(content, verticalThumb, horizontalThumb);
      });
      
      // 添加滚动条悬停效果
      verticalThumb.addEventListener('mouseenter', () => {
        verticalThumb.style.backgroundColor = this.滚动条悬停颜色;
      });
      
      verticalThumb.addEventListener('mouseleave', () => {
        verticalThumb.style.backgroundColor = this.滚动条颜色;
      });
      
      horizontalThumb.addEventListener('mouseenter', () => {
        horizontalThumb.style.backgroundColor = this.滚动条悬停颜色;
      });
      
      horizontalThumb.addEventListener('mouseleave', () => {
        horizontalThumb.style.backgroundColor = this.滚动条颜色;
      });
    },
    updateScrollbars(content, verticalThumb, horizontalThumb) {
      // 更新垂直滚动条
      const scrollHeight = content.scrollHeight;
      const clientHeight = content.clientHeight;
      const scrollTop = content.scrollTop;
      
      const verticalRatio = clientHeight / scrollHeight;
      const verticalThumbHeight = Math.max(verticalRatio * 100, 10); // 最小10%高度
      const verticalThumbTop = (scrollTop / scrollHeight) * (100 - verticalThumbHeight);
      
      verticalThumb.style.height = `${verticalThumbHeight}%`;
      verticalThumb.style.top = `${verticalThumbTop}%`;
      
      // 更新水平滚动条
      const scrollWidth = content.scrollWidth;
      const clientWidth = content.clientWidth;
      const scrollLeft = content.scrollLeft;
      
      const horizontalRatio = clientWidth / scrollWidth;
      const horizontalThumbWidth = Math.max(horizontalRatio * 100, 10); // 最小10%宽度
      const horizontalThumbLeft = (scrollLeft / scrollWidth) * (100 - horizontalThumbWidth);
      
      horizontalThumb.style.width = `${horizontalThumbWidth}%`;
      horizontalThumb.style.left = `${horizontalThumbLeft}%`;
    }
  }
};
</script>

<style scoped>
.scrollbar-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.scrollbar-track {
  opacity: 0.6;
  transition: opacity 0.3s;
}

.scrollbar-component:hover .scrollbar-track {
  opacity: 1;
}
</style>